<template>
  <div style="height: 330px;">
    <Row>
      <Col span="24">
        <Tree :data="treeData" :load-data="loadData"></Tree>
      </Col>
    </Row>
  </div>
</template>

<script>
import { departmentApi } from '@/api/department';
import DepartmentUserTreeItem from '../department-tree-item/department-user-tree-item.vue';
import Treeselect from '@riophae/vue-treeselect';
import Vue from 'vue';
export default {
  name: 'DepartmentUserTree',
  components: {
    DepartmentUserTreeItem
  },
  props: {
    // true 查部门
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 查询部门及员工列表
      originalData: [],
      eventbus: new Vue(),
      // 当前树形选中 部门或人员
      currentSelect: null,
      // 生成适配的树形数据
      treeData: []
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    // 重置搜索内容
    resetSearch() {
      this.getDepartmentUserList(0);
    },
    // 获取当前选择项
    getSelect() {
      return this.currentSelect;
    },
    async getDepartmentUserList(parentId) {
      this.$Spin.show();
      let res = await departmentApi.getDepartmentUserListByParent(parentId);
      this.$Spin.hide();
      this.originalData = res.data;
      this.generateTreeData();
    },
    async loadData(item, callback) {
      let res = await departmentApi.getDepartmentUserListByParent(item.id);
      if (res.code === 1) {
        let data = res.data;
        let tree = [];
        data.forEach(department => {
          let icon = department.user ? 'md-person' : 'md-menu';
          let obj = Object.assign(
            {},
            {
              id: department.id,
              title: department.title,
              expand: false,
              children: [],
              loading: false,
              render: (h, { root, node, data }) => {
                return h(DepartmentUserTreeItem, {
                  props: {
                    isDepartment: !department.user,
                    itemData: {
                      id: department.id,
                      title: department.title,
                      icon: icon,
                      isEmployee: department.user,
                      selectFunction: obj => {
                        if (department.user) {
                          this.currentSelect = obj;
                          this.eventbus.$emit('select', obj);
                          this.$emit('on-select', obj);
                        }
                      }
                    }
                  },
                  style: {
                    cursor: 'pointer'
                  }
                });
              }
            }
          );
          tree.push(obj);
        });
        callback(tree);
      }
    },
    // 生成树形图数据
    generateTreeData() {
      let tree = [];
      this.originalData.forEach(department => {
        let icon = department.type == 1 ? 'md-cube' : 'md-menu';
        let obj = Object.assign(
          {},
          {
            id: department.id,
            title: department.title,
            expand: false,
            children: [],
            loading: false,
            render: (h, { root, node, data }) => {
              return h(DepartmentUserTreeItem, {
                props: {
                  isDepartment: !department.user,
                  itemData: {
                    id: department.id,
                    title: department.title,
                    icon: icon,
                    isEmployee: department.user,
                    selectFunction: obj => {
                      if (department.user) {
                        this.currentSelect = obj;
                        this.eventbus.$emit('select', obj);
                        this.$emit('on-select', obj);
                      }
                    }
                  }
                },
                style: {
                  cursor: 'pointer'
                }
              });
            }
          }
        );
        tree.push(obj);
      });
      this.treeData = tree;
    }
  }
};
</script>
<style lang="less" scoped>
</style>
